<template>
	<div class="edu-page-warp">
		<el-card shadow="never">
			<div class="edu-page-title">{{$t("course.foreignLanguageCourseCodeRalation")}}</div>
			<div class="edu-opertion-bar" style="margin-bottom: 16px">
				<div class="float-right">
					<el-button @click="deleteCourse" type="danger">{{$t("message.delete")}}</el-button>
					<el-button @click="addCourse" type="primary">{{$t("message.add")}}</el-button>
				</div>
			</div>

			<edu-table
				:data="courses"
				@page-change="handleCurrentChange"
				:total="queryForm.total_"
				:pageSize="queryForm.pageSize_"
				:current-page="queryForm.pageNum_"
				@selection-change="chooseCourse"
			>
				<!--   <edu-table-column type="selection" width="50"></edu-table-column>
                <edu-table-column :label="$t('message.order')" width="80">
                    <template slot-scope="props">{{props.row.index}}</template>
				</edu-table-column>-->
				<edu-table-column prop="courseCode" :label="$t('course.FirstForeignLanguageCountryStandard')">
					<template slot-scope="props">{{props.row.languageCode}}</template>
				</edu-table-column>
				<edu-table-column :label="$t('course.courseCode')">
					<template slot-scope="props">{{props.row.courseCode}}</template>
				</edu-table-column>
				<edu-table-column :label="$t('course.courseName')">
					<template slot-scope="props">{{props.row.courseName}}</template>
				</edu-table-column>
				<edu-table-column :label="$t('course.courseNameEn')" prop="courseNameEn" />
				<edu-table-column :label="$t('message.operating')" width="120">
					<template slot-scope="props">
						<el-button type="text" @click="editCourse(props.row)">{{$t("common.btn.edit")}}</el-button>
						<el-button type="text" @click="deleteCourseById(props.row.id)">{{$t("common.btn.delete")}}</el-button>
					</template>
				</edu-table-column>
			</edu-table>
		</el-card>
		<el-dialog
			:title="dialogTitle"
			width="500px"
			:visible.sync="showDialog"
			@close="resetFormValidate()"
			v-drag-dialog
		>
			<el-form
				:model="relateForm"
				:label-width="($store.getters.language || 'cn')==='cn'?'150px':'310px'"
				label-position="right"
				size="mini"
				class="bg-white"
				:rules="courseRules"
				ref="relateForm"
				label-suffix=":"
			>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item
							:label="$t('course.FirstForeignLanguageCountryStandard')"
							prop="foreignInternationalCode"
						>
							<el-input
								v-model="relateForm.foreignInternationalCode"
								style="width: 90%;"
								placeholder="请输入"
							/>
							<!-- 	<el-select
								v-model="relateForm.foreignInternationalCode"
								style="width: 90%;"
								@change="changeSelectInternationCourse"
							>
								<el-option
									v-for="item in options.dywy"
									:key="item.value"
									:label="item.value+'  '+item.label"
									:value="item.value"
								></el-option>
							</el-select>-->
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item
							:label="$t('course.FirstForeignLanguageNameCountryStandard')"
							prop="foreignInternationalName"
						>
							<!-- <el-input disabled="true" v-model="relateForm.foreignInternationalName" style="width: 90%;" /> -->
							<el-input v-model="relateForm.foreignInternationalName" style="width: 90%;" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item
							:label="$t('course.FirstForeignLanguageSchoolStandard')"
							prop="foreignCollegeCode"
						>
							<div class="course-select1">
								<el-select
									v-model="relateForm.foreignCollegeCode"
									:placeholder="$t('course.inputSchoolStandard')"
									filterable
									remote
									:remote-method="selectCourses"
									size="mini"
									style="width: 90%;"
									@change="changeSelectCourse"
								>
									<el-option
										v-for="item in courseCodes"
										:key="item.value"
										:label="item.value"
										:value="item.value"
									>({{item.value}})&nbsp;{{item.label}}</el-option>
								</el-select>
								<i slot="suffix" class="el-icon-search" />
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item :label="$t('course.FirstForeignLanguageNameSchoolStandard')">
							<el-input v-model="relateForm.foreignCollegeName" disabled="true" style="width: 90%;" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<div class="float-right no-bottom no-right">
							<el-button @click="cancelRelateDialog">{{$t("message.cancel")}}</el-button>
							<el-button @click="confirmRelate" type="primary">{{$t("message.confirm")}}</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import { getCourseList } from "common/src/api/courseTemplate";
import {
	findCourseLanguage,
	addFirstLanguage,
	deleteFirstLanguage,
	findFirstLanguageById,
	updateFirstLanguageById
} from "common/src/api/resource/course";
export default {
	name: "courseLanguage",
	data() {
		return {
			queryForm: {
				managerDeptId: "1",
				pageSize_: 20,
				pageNum_: 1,
				total_: 0
			},
			relateForm: {
				foreignInternationalCode: "",
				foreignInternationalName: "",
				foreignCollegeCode: "",
				foreignCollegeName: "",
				remark: ""
			},
			options: {
				dywy: []
			},
			showDialog: false,
			dialogTitle: "",
			courses: [], //课程列表
			courseCodes: [], //
			chooseCourses: [], //选中课程
			editId: "", //当前编辑Id
			courseRules: {
				foreignInternationalCode: [
					{
						required: true,
						// message: this.$t(
						// 	"course.FirstForeignLanguageCountryStandard"
						// ),
						message: this.$t("courses.numlimited"),
						pattern: /^[A-Za-z0-9]{2,32}$/,
						trigger: "blur"
					}
				],
				foreignInternationalName: [
					{
						required: true,
						// message: this.$t(
						// 	"course.FirstForeignLanguageCountryStandard"
						// ),  : '2-32位数字或者字母',

						message: this.$t("courses.nameLimited"),
						pattern: /^[^\s]{2,32}$/,
						trigger: "blur"
					}
				],
				foreignCollegeCode: [
					{
						required: true,
						message: this.$t(
							"course.FirstForeignLanguageSchoolStandard"
						),
						trigger: "blur"
					}
				]
			}
		};
	},
	//name: [{ max: 32, message: "长度不得超过32" }],
	mounted() {
		let user =
			this.$store.state.session.user ||
			JSON.parse(localStorage.getItem("user"));
		console.log(user);

		this.queryForm.managerDeptId = user.currentManageDptId;
		this.getCourseList();
		//this.initCouses();
		let data = {
			lang: this.$store.getters.language || "cn",
			type: "allChild",
			keys: ["X_DYWY"]
		};
		queryDic(data)
			.then(res => {
				if (res.code == 200) {
					// this.fillSelect(res.data);
					UTILS.fillSelect(
						{
							dywy: "X_DYWY"
						},
						res.data,
						this.options
					);
				}
			})
			.catch(error => {
				console.log(error);
			});
	},
	methods: {
		// initCouses() {
		// 	this.courseCodes.length = 0;
		// 	getCourseList({
		// 		trainingLevel: "",
		// 		formLearning: "",
		// 		studentAbroad: "",
		// 		isElective: "",
		// 		pageSize_: 50,
		// 		pageNum_: 1,
		// 		total_: 0
		// 	})
		// 		.then(response => {
		// 			if (response.code == 200) {
		// 				this.courseCodes = [];
		// 				for (var i = 0; i < response.data.list.length; i++) {
		// 					this.courseCodes.push({
		// 						label: response.data.list[i].name,
		// 						value: response.data.list[i].code,
		// 						id: response.data.list[i].id
		// 					});
		// 				}
		// 			} else {
		// 				throw "";
		// 			}
		// 		})
		// 		.catch(e => {});
		// },
		getCourseList() {
			findCourseLanguage(this.queryForm).then(response => {
				if (response.code == 200) {
					response.data.list.forEach((item, index) => {
						item.index =
							this.queryForm.pageSize_ *
								(this.queryForm.pageNum_ - 1) +
							index +
							1;
					});
					this.courses = response.data.list;
					this.queryForm.total_ = response.data.total_;
				}
			});
		},
		handleCurrentChange(val) {
			this.queryForm.pageSize_ = val.pageSize;
			this.queryForm.pageNum_ = val.pageNum;
			this.getCourseList();
		},
		addCourse() {
			this.dialogTitle = this.$t("course.addCourseRelation");
			this.relateForm.foreignInternationalCode = "";
			this.relateForm.foreignInternationalName = "";
			this.relateForm.foreignCollegeCode = "";
			this.relateForm.foreignCollegeName = "";
			this.relateForm.remark = "";
			this.editId = "";
			this.showDialog = true;
		},
		deleteCourse() {
			if (this.chooseCourses.length == 0) {
				this.$noSelectAlert();
				// this.$message({
				// 	type: "info",
				// 	message: this.$t("course.selectDeleteCourseForeign")
				// });
				return;
			}
			this.$delConfirm().then(() => {
				deleteFirstLanguage({
					ids: this.chooseCourses.map(c => c.id)
				}).then(response => {
					if (response.code == 200) {
						this.$message({
							type: "success",
							message: this.$t("message.deleteSuccess")
						});
						this.getCourseList();
					}
				});
			});
		},
		deleteCourseById(id) {
			// this.$confirm(
			// 	this.$t("course.confirmDeleteTip"),
			// 	this.$t("message.prompt"),
			// 	{
			// 		confirmButtonText: this.$t("message.confirm"),
			// 		cancelButtonText: this.$t("message.cancel"),
			// 		type: "warning"
			// 	}
			this.$delConfirm().then(() => {
				deleteFirstLanguage({
					ids: [id]
				}).then(response => {
					if (response.code == 200) {
						this.$message({
							type: "success",
							message: this.$t("message.deleteSuccess")
						});
						this.getCourseList();
					}
				});
			});
		},
		confirmRelate() {
			this.$refs.relateForm.validate(valid => {
				if (!valid) {
					return;
				}
				let data = {
					languageCode: this.relateForm.foreignInternationalCode,
					courseCode: this.relateForm.foreignCollegeCode,
					languageName: this.relateForm.foreignInternationalName,
				};
				if (this.editId) {
					data.id = this.editId;
					updateFirstLanguageById(data).then(res => {
						if (res.code == 200) {
							this.showDialog = false;
							this.getCourseList();
						}
					});
				} else {
					addFirstLanguage(data).then(res => {
						if (res.code == 200) {
							this.showDialog = false;
							this.getCourseList();
						}
					});
				}
			});
		},
		cancelRelateDialog() {
			this.showDialog = false;
		},
		//搜索远程课程列表
		selectCourses(query) {
			this.courseCodes.length = 0;
			getCourseList({
				trainingLevel: "",
				formLearning: "",
				studentAbroad: "",
				condition: query,
				isElective: "",
				managerDeptId: this.queryForm.managerDeptId,
				pageSize_: 20,
				pageNum_: 1,
				total_: 0
			})
				.then(response => {
					if (response.code == 200) {
						this.courseCodes = [];
						for (var i = 0; i < response.data.list.length; i++) {
							this.courseCodes.push({
								label: response.data.list[i].name,
								value: response.data.list[i].code,
								id: response.data.list[i].id
							});
						}
					} else {
						throw "";
					}
				})
				.catch(e => {});
		},
		chooseCourse(val) {
			this.chooseCourses = val;
		},
		//选中远程搜索的课程
		changeSelectCourse(val) {
			let option = this.courseCodes.find(option => option.value == val);
			if (option) {
				this.relateForm.foreignCollegeName = option.label;
				this.relateForm.foreignCollegeCode = option.value;
			} else {
				this.relateForm.foreignCollegeName = "";
				this.relateForm.foreignCollegeCode = "";
			}
		},
		//选择第一外国语码国标
		changeSelectInternationCourse(val) {
			let option = this.options.dywy.find(option => option.value == val);
			if (option) {
				this.relateForm.foreignInternationalCode = option.value;
				this.relateForm.foreignInternationalName = option.label;
			} else {
				this.relateForm.foreignInternationalCode = "";
				this.relateForm.foreignInternationalName = "";
			}
		},
		editCourse(row) {
			this.dialogTitle = this.$t("course.editCourseRelation");
			this.showDialog = true;
			this.editId = row.id;
			findFirstLanguageById(row.id).then(res => {
				if (res.code == 200) {
					this.relateForm.foreignCollegeCode = res.data.courseCode;
					this.relateForm.foreignCollegeName = row.courseName;
					this.relateForm.foreignInternationalCode = row.languageCode;
					this.relateForm.foreignInternationalName = row.languageName;
					// let option = this.options.dywy.find(
					// 	option => option.value == res.data.languageCode
					// );
					// if (option) {
					// 	this.relateForm.foreignInternationalCode = option.value;
					// 	this.relateForm.foreignInternationalName = option.label;
					// }
				}
			});
		},
		// 清除表单校验
		resetFormValidate() {
			this.$refs.relateForm.resetFields();
		}
	}
};
</script>
<style lang="scss">
.course-select1 {
	input {
		padding-left: 8px;
		background: transparent;
	}
	i {
		margin-left: -28px;
		color: #939faf;
	}
}
</style>
